<template>
	<div style="font-family: '微软雅黑';">
		<div class="head">
			<a @click="$router.push({path: '/find'})" class="return"></a>
			资讯详情
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<div class="card-padding">
					<p class="content-title" v-text="news.title"></p>
					<p class="content-time"><span>{{news.createTime | dateFormat}}</span></p>
					<div class="content">
						<img :src="news.thumbnail" alt="">
						<div v-html="news.content"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { dateFormat } from 'vux';
	let _this;
	export default {
		name: 'NewsDetails',
		data() {
			return {
				id: this.$route.query.id,
				news: []
			}
		},
		beforeCreate() {
			_this = this;
		},
		mounted() {
			this.getList();
		},
		methods: {
			getList() {
				this.axios.get(process.env.API_HOST + 'information/' + this.id).then(res => { 
					if(res.data.code == 200){
						this.news = res.data.data;
					}
				})
			}
		},
		filters: {
		    dateFormat
		}
	}
</script>

<style scoped lang="less">
	// .head~.overlay {
	// 	top: 45px;
	// 	background: #344b7d;
	// }
	
	.head .return:after {
		border-color: #FFFFFF;
	}
	
	.overlay-content {
		padding: 0 10px;
	}
	
	.card-padding {
		padding-bottom: 20px;
	}
	
	.content-title {
		padding: 10px 0;
		text-align: left;
		font-size: 19px;
	}
	
	.content-time {
		color: #8690ab;
		font-size: 13px;
		margin-bottom: 10px;
	}
	
	.content {
		font-size: 14px;
		color: #8690ab;
		// padding-top: 20px;
		/deep/ img {
			width: 100%;
			padding: 5px 0;
		}
	}
</style>